<template>
  <div>
    <img class="search_icon" src="@/assets/images/league/search.png" @click="open">
    <van-popup v-model="show" :style="{ height: '100%', width: '100%', background: '#fcfcfc' }">
      <div class="search_title">搜索</div>
      <van-field v-model="value" left-icon="search" clearable :placeholder="placeholder" />
      <div class="bottom_btn">
        <van-row gutter="20">
          <van-col span="12">
            <van-button type="default" block @click="close">返回</van-button>
          </van-col>
          <van-col span="12">
            <van-button type="info" block @click="onFinish">确定</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入要搜索的内容'
    }
  },
  data () {
    return {
      show: false,
      value: ''
    };
  },
  methods: {
    open () {
      this.show = true;
    },
    close () {
      this.show = false;
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish() {
      this.close();
      this.$emit('onFinish', this.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.search_title {
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
}
.bottom_btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.search_icon {
  width: 12px;
  height: 12px;
}
</style>
